<template>
	<div class="review-page">
		<!-- 返回与标题 -->
		<header class="page-header">
			<h2 >评价</h2>
		</header>

		<!-- 用户信息 -->
		<div class="user-info">
			<img class="user-img" src="/static/worker-profile.jpg" alt="User Image" />
			<div class="user-details">
				<h3>王刚强</h3>
				<span class="certification">三级认证</span>
				<span class="order-number">订单编号：29898787876556</span>
				<span class="service">预约服务：修补墙皮</span>
			</div>
		</div>

		<!-- 满意度评分 -->
		<div class="rating">
			<p>满意度</p>
			<div class="stars">
				<span v-for="star in 5" :key="star" class="star" :class="{ active: star <= rating }" @click="setRating(star)">★</span>
			</div>
		</div>

		<!-- 标签选择 -->
		<div class="tags">
			<p>选择标签</p>
			<div class="tag-list">
				<span v-for="tag in availableTags" :key="tag" class="tag" :class="{ selected: selectedTags.includes(tag) }" @click="toggleTag(tag)">
					{{ tag }}
				</span>
			</div>
		</div>

		<!-- 我的评价 -->
		<div class="my-review">
			<p>我的评价</p>
			<textarea class="review-text" v-model="additionalReview" placeholder="说说您对服务的评价"></textarea>

			<!-- 图片上传 -->
			<div class="image-upload">
				<label for="file-input">
					<img :src="uploadIcon" alt="Upload Image" class="upload-icon" />
				</label>
				<input type="file" id="file-input" @change="handleFileUpload" />
			</div>
		</div>

		<!-- 提交按钮 -->
		<button class="submit-btn" @click="submitReview">提交</button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			rating: 3, // 默认评分
			availableTags: ['服务态度好', '干活细致', '超预期', '工具非常齐全', '服务很专业', '值得推荐他人'],
			selectedTags: [], // 用户选择的标签
			additionalReview: '', // 追加评价
			uploadedImage: null, // 上传的图片
			uploadIcon: '/static/pages.jpg' // 图片的绝对路径引用
		};
	},
	methods: {
		setRating(star) {
			this.rating = star; // 设置评分
		},
		toggleTag(tag) {
			// 切换标签选择状态
			if (this.selectedTags.includes(tag)) {
				this.selectedTags = this.selectedTags.filter(t => t !== tag);
			} else {
				this.selectedTags.push(tag);
			}
		},
		handleFileUpload(event) {
			const file = event.target.files[0];
			this.uploadedImage = URL.createObjectURL(file); // 获取图片 URL
			console.log('已上传图片:', this.uploadedImage);
		},
		submitReview() {
			// 提交评价
			const reviewData = {
				rating: this.rating,
				tags: this.selectedTags,
				review: this.additionalReview,
				image: this.uploadedImage,
				date: new Date().toISOString(),
			};
			console.log('提交的评价数据:', reviewData);
			// 在此处可以处理提交逻辑，如调用 API
		}
	}
};
</script>

<style scoped>
	/* 页面整体布局 */
	.review-page {
		font-family: Arial, sans-serif;
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		max-width: 500px;
		margin: 0 auto;
	}

	/* 头部样式 */
	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.back-btn,
	.options-btn {
		background: none;
		border: none;
		font-size: 18px;
		cursor: pointer;
	}

	h2 {
		font-size: 18px;
		margin: 0;
	}

	/* 用户信息部分 */
	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.user-img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 15px;
	}

	.user-details h3 {
		font-size: 16px;
		margin: 0;
	}

	.user-details span {
		display: block;
		color: #888;
		margin-top: 5px;
		font-size: 12px;
	}

	/* 满意度评分 */
	.rating {
		margin-bottom: 20px;
	}

	.stars {
		display: flex;
	}

	.star {
		font-size: 24px;
		color: #ccc;
		cursor: pointer;
		margin-right: 5px;
	}

	.star.active {
		color: #ffcc00;
	}

	/* 标签选择 */
	.tags {
		margin-bottom: 20px;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
	}

	.tag {
		background-color: #f0f0f0;
		padding: 8px 12px;
		border-radius: 20px;
		margin-right: 10px;
		margin-bottom: 10px;
		cursor: pointer;
	}

	.tag.selected {
		background-color: #007aff;
		color: white;
	}

	/* 我的评价部分 */
	.my-review {
		margin-bottom: 20px;
	}

	.review-text {
		width: 100%;
		height: 80px;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 10px;
		margin-bottom: 20px;
		resize: none;
	}

	/* 图片上传 */
	.image-upload {
		display: flex;
		justify-content: flex-start;
	}

	.upload-icon {
		width: 40px;
		height: 40px;
		cursor: pointer;
	}

	#file-input {
		display: none;
	}

	/* 提交按钮 */
	.submit-btn {
		background-color: #007aff;
		color: white;
		border: none;
		padding: 10px 20px;
		border-radius: 20px;
		cursor: pointer;
		width: 100%;
	}

	.submit-btn:hover {
		background-color: #005bb5;
	}
</style>
